import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import styles from './tabbar.css'
import { NavLink } from "dva/router";
function Tabbar(props) {
  const tabbarItem = [
    {
      title: 'film',
      url: '/film'
    },
    {
      title: 'products',
      url: '/products'
    },
    {
      title: 'game',
      url: '/game'
    }
  ]
  const [currentTab, setCurrentTab] = useState()
  const currentUrl = window.location.hash.split('#')[1]
  const switchTab = () => {
    setCurrentTab(currentUrl)
  }
  useEffect(() => {
    switchTab()
  },[currentUrl])

  return (
    <div className={styles.tabbar}>
      {
        tabbarItem.map((item, index) => {
          return (
            <div
              className={`
              ${styles.tabbarItem}
              ${currentTab === item.url ? styles.active: ''}
              `}
              onClick={() => switchTab(item.title)}
              key={index}
            >
              <NavLink to={item.url}>{item.title}</NavLink>
            </div>
          )
        })
      }
    </div>
  )
}

Tabbar.propTypes = {};

export default Tabbar;
